import React from "react";
import { Outlet, NavLink } from "react-router-dom";
import { Tabbar } from "react-vant";
import { mainRouter } from "../router/router";
type Props = {};

const Index = (props: Props) => {
  return (
    <div className="index">
      <main>
        <Outlet />
      </main>
      <footer>
        <div className="demo-tabbar">
          <Tabbar>
            {mainRouter &&
              mainRouter.map((item, index) => {
                return (
                  <Tabbar.Item icon={item.icon} key={index}>
                    <NavLink to={item.path}>{item.title}</NavLink>
                  </Tabbar.Item>
                );
              })}
          </Tabbar>
        </div>
      </footer>
    </div>
  );
};

export default Index;
